目前在瀏覽器儲存使用者資料的主流方式有兩種，
一種是存local storage、一種是存在Cookie裡面，
其他還有trust token、web sql等等的這裡就先不提

透過瀏覽器的開發者工具(f12)，可以看到這個網站存了哪些東西在什麼地方

在React中，我們可以直接用js呼叫localStorage來操作資料的存取，
不過因為跟Cookie相比，localStorage在資安上的防禦手段沒有Cookie來得豐富，
所以我決定還是使用Cookie在瀏覽器上存取資料。

首先安裝npm i universal-cookie

接著在程式中import Cookies from 'universal-cookie';

然後新增 存&取Cookie的function，還滿簡單的吧~

//cookie
  const cookies = new Cookies();

  export const setToken = (token) => {
  cookies.set('token', token, 
  { path: '/',secure: true,sameSite :true}
  );
  console.log(cookies.get('token'));
  };

export const getAuthToken = () => {
  if (cookies.get('token')===undefined){
    return '';
  }
  return cookies.get('token');
};

這三個參數分別代表:
secure: true 只能在https連線下回傳Cookie
httpOnly: true 禁止透過script操作Cookie
sameSite :true 禁止跨站回傳Cookie

我原本在這個Cookie裡面有加上Optional的參數httpOnly: true，
但是發現加上去的話我就沒辦法在前端存取Cookie內的token了...

如果不加上httpOnly: true，就表示javascript可以對Cookie做操作，
雖然有另外兩個參數，但安全性還是大大降低，因此另外還需要透過其他header來做資安上的補強

下次來試試看trust token api好了